<template>
    <div>
      <!-- 卡片视图 -->
        <el-card shadow="always">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>财务</el-breadcrumb-item>
                <el-breadcrumb-item>提现管理</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 搜索框 -->
            <el-input style="width:280px;" placeholder="请输入用户姓名" class="search" v-model="searchData" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>>
                <el-button slot="append" @click="searchBtn" :disabled="isDisabled">搜索</el-button>
            </el-input>
            <!-- 数据列表 -->
            <el-table :data="tabdata" border @row-click="shenhedata">
                <el-table-column type="index" label="#" width="75"></el-table-column>
                <el-table-column prop="users_name" label="账户名"></el-table-column>
                <el-table-column prop="users_phone" label="账户号"></el-table-column>
                <el-table-column label="账户类型">
                    <template slot-scope="scope">{{ scope.row.withdrawal_account_account_type | account_type }}</template>
                </el-table-column>
                <el-table-column prop="price" label="提现金额"></el-table-column>
                <el-table-column prop="status_title" label="状态"></el-table-column>
                <el-table-column label="操作">
                    <el-tooltip class="item" effect="dark" content="提现审核" placement="top" :enterable='false'>
                        <el-button size="mini" type="warning"  @click="shenhe()">
                            <i class="el-icon-edit-outline" style="margin:0 auto"></i>
                        </el-button>
                    </el-tooltip>
                </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="p"
              :page-sizes="[10, 20, 50, 80]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            ></el-pagination>
        </el-card>
        <el-dialog
          title="审核"
          style="text-align: center;"
          :visible.sync="addUserDialogVisible"
          width="35%"
          :show-close="Flag"
          :close-on-press-escape="Flag"
          :close-on-click-modal="Flag"
          @close="closeDialog"
        >
            <div class="veriRevi"> <span>账户名</span><span>{{clickData.users_name}}</span></div>
            <div class="veriRevi"><span>账户号</span><span>{{clickData.users_phone}}</span></div>
            <div class="veriRevi"><span>账户类型</span><span>{{clickData.withdrawal_account_account_type | account_type}}</span></div>
            <div class="veriRevi"><span>提现金额</span><span>{{clickData.price}}</span></div>
            <div class="veriRevi">
                <span>审核</span>
                <!-- <el-select v-model="okOrUnok" style="width:50%">
                    <el-option v-for="(item) in shOptions" :key="item.value" :value="item.value" :label="item.laber"></el-option>
                </el-select> -->
                <span>
                {{okOrUnok?'通过':'驳回'}}
                <el-switch
                v-model="okOrUnok"
                active-color="#13ce66"
                inactive-color="#ccc">
                </el-switch>
                </span>
            </div>
            <div class="veriRevi" v-if="!okOrUnok">
                <span>理由:</span>
                <el-input style="width:50%" type="textarea" placeholder="请输入驳回的理由" v-model="unOkLy"></el-input>
            </div>
            <el-button type="warning" @click="unOk">取消</el-button>
            <el-button type="success" @click="isOk">确定</el-button>
        </el-dialog>
    </div>
</template>

<script>
import {get} from "../../../../public/API/query";
import config from '../../../../public/config'

export default {
    data() {
        return {
            unOkLy:'',
            okOrUnok:false,
            shOptions:[{value:1,laber:'通过'},{value:2,laber:'不通过'}],
            //列表数据
            tableData: [],
            //查询参数
            p: 1,
            limit: 10,
            //总条数
            count: null,
            currentPage4: 1,
            searchData: "",
            value: [],
            treeData: [],
            addGroupForm: {
                title: "",
            },
            addUserDialogVisible:false,
            Flag:false,
            clickData:{},
            //默认选择节点ID数组
            defaultKeys: [],
            isDisabled: false,
            userId: "",
        };
    },
    computed:{
        tabdata(){
            var data = []
            for (const i in this.tableData) {
                if (this.tableData[i].status!=1) {
                    data.push(this.tableData[i])
                }
            }
            return data
        }
    },
    filters:{
        account_type(value){
            switch (value) {
                case 1:
                    return '支付宝'
                    break;
                case 2:
                    return '微信'
                    break;
                case 3:
                    return '银行卡'
                    break;
                default:
                    break;
            }
        }
    },
    methods: {
        unOk(){
            this.addUserDialogVisible=false
        },
        isOk(){
            if (this.okOrUnok) {
                get('finance/cash/subReview',{id:this.clickData.id,type:1},res=>{
                    this.addUserDialogVisible=false
                })
            } else {
                get('finance/cash/subReview',{id:this.clickData.id,type:-1,title:this.unOkLy},res=>{
                    this.addUserDialogVisible=false
                })
            }
            
        },
        shenhedata(value){
            this.clickData = value
        },
        shenhe(){
            this.addUserDialogVisible=true
        },
        //设置权限
        setRights(value) {
            
        },
        closeDialog() {
            this.Flag = true;
        },
        // 重置节点ID数组
        setRightDialogClose() {
            this.defaultKeys = [];
        },
        //提交权限按钮
        commitRightsBtn() {
           
        },
        //获取数据
        getTableData(){
            if (this.searchData) {
                get('finance/cash/index',{
                    p:this.p,
                    limit:this.limit,
                    title:this.searchData
                },res=>{
                    this.tableData = res.data._list
                    this.count = res.data.count
                })
            } else {
                get('finance/cash/index',{
                    p:this.p,
                    limit:this.limit,
                },res=>{
                    this.tableData = res.data._list
                    this.count = res.data.count
                })
            }
            
        },
        handleSizeChange(newSize) {
            this.limit = newSize;
            this.getTableData();
        },
        handleCurrentChange(newPage) {
            this.p = newPage;
            this.getTableData();
        },
        //搜索功能
        searchBtn() {
            this.getTableData()
        },
    },
    watch: {
        searchData: function() {
            if (!this.searchData) {
                this.getTableData();
            }
            if (this.searchData) {
                this.isDisabled = false;
            }
        }
    },

    created() {
        this.getTableData();
        
    },
};
</script>

<style lang="less" scoped>
.veriRevi{
    width: 100%;
    margin-top: 10px;
    span:nth-child(1){
        width: 50%;
        text-align: left;
        vertical-align: top;
    }
    span:nth-child(2){
        width: 50%;
        text-align: right;
    }
    &:last-of-type{
        margin-bottom: 20px;
    }
}
.el-breadcrumb {
    margin-bottom: 30px;
}
.el-input {
    margin-bottom: 30px;
    width: 280px;
    margin-right: 30px;
    
}
.el-pagination {
    margin-top: 30px;
}
.addRulesWrap {
    margin-left: 80px;
}
.addRules {
    position: absolute;
    right: 25%;
    bottom: 5%;
}
.disable {
    margin-left: 15px;
}
</style>
